<section
    class="hero {% if page.hero_height %} {{ page.hero_height }} {% else %} is-medium {% endif %} is-bold is-primary" {%
    if page.hero_image %}
    style="background: url('{{ page.hero_image }}') no-repeat center center; background-size: cover;" {% endif %}>
    <div class="hero-body {% if page.hero_darken %} hero-darken {% endif %}" style="text-align:center">
        <div class="container">
            {% if page.logo %}
            <img src="{{ page.logo }}" alt="{{ page.title }}" width="120" height="120" />
            {% endif %}
            <h1 class="title is-2">{{ page.title }}</h1>
            <p class="subtitle is-3">{{ page.subtitle }}</p>
            {% if page.hero_link %}
            <a href="{{ page.hero_link | relative_url }}" class="button is-info is-large">{{ page.hero_link_text }}</a>
            {% endif %}
        </div>
    </div>
</section>